﻿<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>使用CSS3层次选择器</title>
	<style type="text/css">
		*{margin: 0;padding:0;}
		body {width: 300px;margin: 0 auto;}
		div{margin:5px;padding:5px;border: 1px solid #ccc;}
		div div {background: orange;}
		body > div {background: green;}
		.active + div {background: lime;}
		.active ~ div {background: red;}
	</style>
</head>
<body>
	<div  class="active">1</div><!-- 为了说明相邻兄弟选择器，在此处添加一个类名active -->
	<div>2</div>
	<div>3</div>
	<div>4
		<div>5</div>
		<div>6</div>
	</div>
	<div>7
		<div>8
			<div>9
				<div>10</div>
			</div>
		</div>
	</div>
</body>
</html>